<template>
  <view class="container">
    <!-- 购物车列表 -->
    <view v-if="cartItems.length > 0" class="cart-list">
      <view
        v-for="item in cartItems"
        :key="item.id"
        class="cart-item"
      >
        <image class="item-image" :src="item.image" mode="aspectFill" />
        <view class="item-info">
          <text class="item-name">{{ item.name }}</text>
          <text v-if="item.spec" class="item-spec">{{ item.spec.name }}</text>
          <text v-if="item.specialRequests" class="item-requests">{{ item.specialRequests }}</text>
          <view class="item-price">
            <text class="price-value">{{ item.points }}</text>
            <u-icon name="heart-fill" color="#ff6b81" size="14" />
          </view>
        </view>
        <view class="item-controls">
          <view class="quantity-controls">
            <view class="quantity-btn" @tap="decreaseQuantity(item)">
              <u-icon name="minus" color="#666" size="16" />
            </view>
            <text class="quantity-text">{{ item.quantity }}</text>
            <view class="quantity-btn" @tap="increaseQuantity(item)">
              <u-icon name="plus" color="#666" size="16" />
            </view>
          </view>
          <view class="delete-btn" @tap="removeItem(item)">
            <u-icon name="trash" color="#ff6b81" size="20" />
          </view>
        </view>
      </view>
    </view>

    <!-- 空状态 -->
    <view v-else class="empty-cart">
      <u-empty
        mode="car"
        text="购物车空空如也"
        icon="http://cdn.uviewui.com/uview/empty/car.png"
      />
      <custom-button
        type="primary"
        text="去点餐"
        @click="goToMenu"
      />
    </view>

    <!-- 特殊要求 -->
    <view v-if="cartItems.length > 0" class="special-requests">
      <text class="section-title">订单特殊要求</text>
      <u-textarea
        v-model="orderSpecialRequests"
        placeholder="请输入订单的特殊要求，如用餐时间、座位偏好等"
        :maxlength="200"
        :auto-height="false"
        height="100"
      />
    </view>

    <!-- 底部结算栏 -->
    <view v-if="cartItems.length > 0" class="bottom-bar">
      <view class="total-info">
        <text class="total-label">合计：</text>
        <text class="total-points">{{ totalPoints }}</text>
        <u-icon name="heart-fill" color="#ff6b81" size="16" />
      </view>
      <custom-button
        type="primary"
        size="large"
        :text="`立即下单`"
        @click="createOrder"
      />
    </view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useCartStore } from '@/store/modules/cart'
import { useOrderStore } from '@/store/modules/order'

const cartStore = useCartStore()
const orderStore = useOrderStore()

// 数据
const orderSpecialRequests = ref('')

// 计算属性
const cartItems = computed(() => cartStore.items)
const totalPoints = computed(() => cartStore.totalPoints)

// 方法
const goToMenu = () => {
  uni.switchTab({ url: '/pages/menu/index' })
}

const increaseQuantity = (item) => {
  cartStore.updateQuantity(item.id, item.quantity + 1)
}

const decreaseQuantity = (item) => {
  if (item.quantity > 1) {
    cartStore.updateQuantity(item.id, item.quantity - 1)
  } else {
    removeItem(item)
  }
}

const removeItem = (item) => {
  uni.showModal({
    title: '提示',
    content: '确定要删除这个商品吗？',
    success: (res) => {
      if (res.confirm) {
        cartStore.removeFromCart(item.id)
        uni.showToast({
          title: '已删除',
          icon: 'success'
        })
      }
    }
  })
}

const createOrder = async () => {
  try {
    uni.showLoading({ title: '创建订单中...' })
    
    const orderData = {
      items: cartItems.value.map(item => ({
        id: item.id,
        name: item.name,
        quantity: item.quantity,
        points: item.points,
        spec: item.spec,
        specialRequests: item.specialRequests
      })),
      totalPoints: totalPoints.value,
      specialRequests: orderSpecialRequests.value
    }
    
    await orderStore.createOrder(orderData)
    
    uni.hideLoading()
    uni.showToast({
      title: '订单创建成功',
      icon: 'success'
    })
    
    // 清空购物车
    cartStore.clearCart()
    
    // 跳转到订单页面
    setTimeout(() => {
      uni.switchTab({ url: '/pages/order/index' })
    }, 1500)
    
  } catch (error) {
    uni.hideLoading()
    console.error('创建订单失败:', error)
    uni.showToast({
      title: '创建订单失败',
      icon: 'none'
    })
  }
}

// 设置购物车特殊要求
const setCartSpecialRequests = () => {
  cartStore.setSpecialRequests(orderSpecialRequests.value)
}

onMounted(() => {
  orderSpecialRequests.value = cartStore.specialRequests
})
</script>

<style lang="scss" scoped>
.container {
  padding: 20rpx;
  background: #f5f5f5;
  min-height: 1334rpx;
  padding-bottom: 120rpx;
}

.cart-list {
  margin-bottom: 20rpx;
}

.cart-item {
  display: flex;
  background: #fff;
  padding: 20rpx;
  border-radius: 20rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
  
  .item-image {
    width: 120rpx;
    height: 120rpx;
    border-radius: 10rpx;
    margin-right: 20rpx;
}
  
  .item-info {
    flex: 1;
    
    .item-name {
      font-size: 28rpx;
      font-weight: bold;
      color: #333;
      display: block;
      margin-bottom: 8rpx;
}
    
    .item-spec,
    .item-requests {
      font-size: 24rpx;
      color: #666;
      display: block;
      margin-bottom: 4rpx;
}
    
    .item-price {
      display: flex;
      align-items: center;
      margin-top: 8rpx;
      
      .price-value {
        font-size: 28rpx;
        font-weight: bold;
        color: #ff6b81;
        margin-right: 4rpx;
}
    }
  }
  
  .item-controls {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    
    .quantity-controls {
      display: flex;
      align-items: center;
      
      .quantity-btn {
        width: 40rpx;
        height: 40rpx;
        background: #f5f5f5;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
}
      
      .quantity-text {
        font-size: 28rpx;
        font-weight: bold;
        color: #333;
        margin: 0 20rpx;
        min-width: 40rpx;
        text-align: center;
}
    }
    
    .delete-btn {
      width: 40rpx;
      height: 40rpx;
      background: #f5f5f5;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
}
  }
}

.empty-cart {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 200rpx 0;
}

.special-requests {
  background: #fff;
  padding: 30rpx;
  border-radius: 20rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
  
  .section-title {
    font-size: 30rpx;
    font-weight: bold;
    color: #333;
    display: block;
    margin-bottom: 20rpx;
}
}

.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  padding: 20rpx 30rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 -2rpx 8rpx rgba(0, 0, 0, 0.1);
  
  .total-info {
    display: flex;
    align-items: center;
    
    .total-label {
      font-size: 28rpx;
      color: #666;
}
    
    .total-points {
      font-size: 32rpx;
      font-weight: bold;
      color: #ff6b81;
      margin-right: 4rpx;
}
  }
}
</style>